<template>
  <el-container>
    <!-- <el-header> <img src="@/assets/logo.png" class="logo" /></el-header> -->
    <el-header> <img src="@/assets/logo.png" class="logo" /></el-header>
    <el-container>
      <el-aside width="200px" v-show="false">
        <el-menu
          style="height: 100%"
          active-text-color="#ffd04b"
          background-color="#545c64"
          default-active="vichdraw"
          text-color="#fff"
          router
        >
          <el-menu-item index="vichdraw">
            <template #title>
              <SvgIcon icon-class="draw" size="24" color="#fefefe" />
              <span style="margin-left: 8px">Vichdraw</span>
            </template>
          </el-menu-item>
          <el-menu-item index="uwb"
            ><template #title>
              <SvgIcon icon-class="UWB" size="24" color="#fefefe" />
              <span style="margin-left: 8px">UWB</span>
            </template></el-menu-item
          >
        </el-menu>
      </el-aside>
      <el-main> <router-view ref="view"></router-view></el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { useStore } from '@/store/index'

export default defineComponent({
  setup() {
    onMounted(async () => {
      // router.push({ name: 'Editor' })
    })
  }
})
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #545c64;
  color: var(--el-text-color-primary);
  line-height: 50px;
}

.el-tabs,
.el-tab-pane,
.el-tabs__content,
.el-container {
  height: 100%;
}

.el-main {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex; /*Flex布局*/
}

.logo {
  text-align: center;
  position: absolute;
  width: 160px;
  padding: 10px;
}
</style>
